<template>
  <view class="message">
    <view class="message-list">
      <view
        class="message-item"
        v-for="(item, index) in list"
        style="margin-bottom: 20rpx">
        <view class="message-item-date">{{ item.createTime }}</view>
        <view class="message-item-content">
          <view class="evaluate-item-header">
            <view class="evaluate-item-icon">
              <image
                src="@/static/ring.png"
                mode=""></image>
            </view>
            <view class="">{{ item.msgTypeStr }}</view>
          </view>
          <view class="message-item-area">
            {{ item.msgContent }}
          </view>
        </view>
      </view>
      <u-empty
        text="列表为空"
        class="kong"
        mode="list"
        v-if="list.length === 0"></u-empty>
      <u-loadmore
        v-if="list.length"
        :status="loadStatus">
      </u-loadmore>
    </view>
  </view>
</template>

<script>
import { d_resNull } from 'common/util.js'
export default {
  data() {
    return {
      list: [],
      pageSize: 10,
      pageNum: 1,
      taglistShow: true, //存是否还有值
      loadStatus: 'loadmore'
    }
  },
  onReachBottom() {
    if (this.taglistShow) {
      this.showLoading()
      this.loadStatus = 'loading'
      setTimeout(() => {
        this.pageNum++
        uni.stopPullDownRefresh()
        this.getMessageList()
        this.loadStatus = 'nomore'
      }, 1000)
    } else {
      this.loadStatus = 'nomore'
    }
  },
  // 强制下拉刷新
  onPullDownRefresh() {
    this.pageNum = 1
    this.pageSize = 10
    // this.showLoading()
    setTimeout(() => {
      uni.stopPullDownRefresh()
      this.hideLoading()
      this.getMessageList()
    }, 1000)
  },
  onLoad() {
    this.getMessageList()
  },
  methods: {
    showLoading() {
      uni.showLoading({
        title: '加载中'
      })
    },
    hideLoading() {
      uni.hideLoading()
    },
    async getMessageList() {
      const params = {
        pageSize: Number(this.pageSize),
        pageNum: Number(this.pageNum)
      }
      const { code, result, message } = await this.$u.get(
        `/freight-message/msgRecord/pageList`,
        params
      )
      if (code == '0') {
        this.hideLoading()
        this.taglistShow = result.records.length ? true : false
        this.loadStatus =
          result.records.length < this.pageSize ? 'nomore' : 'loadmore'
        if (this.pageNum == 1) {
          this.list = result.records
        } else {
          this.list = this.list.concat(d_resNull(result.records))
        }
      } else {
        this.hideLoading()
        this.$api.msg(message)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.message {
  background: #f6f6f6;
}

.message-list {
  padding: 30rpx;
  min-height: 100vh;
}
.ring-icon {
  width: 42rpx;
  height: 42rpx;
  background: #3399ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;

  image {
    width: 24rpx;
    height: 24rpx;
  }
}
.message-item-date {
  width: fit-content;
  padding: 0 15rpx;
  line-height: 32rpx;
  height: 32rpx;
  background: #e8e8e8;
  border-radius: 4rpx;
  margin: 24rpx auto;
  font-size: 24rpx;
  color: #999999;
}

.message-item-content {
  width: 100%;
  background: #ffffff;
  border-radius: 10rpx;
  padding: 22rpx;
}

image {
  width: 24rpx;
  height: 24rpx;
}

.message-item-area {
  width: 90%;
  padding-left: 24rpx;
  font-size: 24rpx;
  background-color: #ffffff;
  color: #a2a2a2;
  line-height: 33rpx;
  border: 1px solie black;
}

.evaluate-item-content {
  width: 100%;
  background: #ffffff;
  border-radius: 10rpx;
}

.evaluate-item-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 22rpx 22rpx 0 22rpx;
}

.evaluate-item-icon {
  width: 42rpx;
  height: 42rpx;
  background: #3399ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;

  image {
    width: 24rpx;
    height: 24rpx;
  }
}
</style>
